<div class="panel-body" id="ruleform" style="background: #FFFFFF;border: 2px solid #e9e9e9">
    <div class="row " style="padding-top: 10px">
        <div class="col-md-1 col-xs-1 col-lg-1">
            <div style="float: right"><span>规则名称</span></div>
        </div>
        <div class="col-md-10 col-xs-10 col-lg-10">
            <div class="form-group">
                <input class="form-control" id="rulestaticname" name="rulestaticname" style="width: 160px;"/>
            </div>
        </div>
        <div class="col-md-1 col-xs-1 col-lg-1" id="show">
            <span onclick="showrulestatic('0')" style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-up'
                                                                                           style="margin-right: 10px"></i>收起规则</span>
        </div>
    </div>
    <div class="row " style="padding-top: 10px">
        <div class="col-md-1 col-xs-1 col-lg-1">
            <div style="float: right"><span>所在组名</span></div>
        </div>
        <div class="col-md-10 col-xs-10 col-lg-10">
            <div class="form-group">
                <input class="form-control" id="group_name" name="group_name" style="width: 160px;"/>
            </div>
        </div>
    </div>
    <div class="row" style="padding-top: 10px">
        <div class="col-md-1 col-xs-1 col-lg-1">
            <div style="float: right"><span>数据源</span></div>
        </div>
        <div class="col-md-11 col-xs-11 col-lg-11">
            <div class="form-group">
                <select class="form-control" onchange="changedatatable()" id="datatable" name="datatable"
                        style="width: 160px;">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row" style="padding-top: 10px">
        <div class="col-md-1 col-xs-1 col-lg-1">
            <div style="float: right"><span>指标选择</span></div>
        </div>
        <div class="col-md-11 col-xs-11 col-lg-11" id="targetgroup">
            <div class="form-group" style="overflow: hidden">
                <select class="form-control" name="target" id="target1" style="width: 160px;float: left">
                    <option value="">请选择</option>
                </select>
                <span style="float: left;line-height: 30px;margin-left: 10px;margin-right: 10px;">的</span>
                <select class="form-control" name="type" id="type1" style="width: 160px;;float: left">
                    <option value="">请选择</option>
                    <option value="COUNT">总数</option>
                    <option value="AVG">平均数</option>
                    <option value="SUM">和</option>
                </select>
                <span class="target_btn"><i class="fa fa-plus" onclick="addtarget()"></i></span>
            </div>
        </div>
    </div>
    <div class="row" style="padding-top: 10px">
        <div class="col-md-1 col-xs-1 col-lg-1">
            <div style="float: right"><span>维度选择</span></div>
        </div>
        <div class="col-md-11 col-xs-11 col-lg-11" id="latitudegroup">
            <div class="form-group" style="overflow: hidden">
                <select class="form-control" id="latitude1" name="latitude" style="width: 160px;float: left;">
                    <option value="">请选择</option>
                </select>
                <!--<span class="target_btn"><i class="fa fa-plus" onclick="addlatitude()"></i></span>-->
            </div>
        </div>
    </div>
    <div class="row" style="padding-top: 10px">
        <div class="col-md-1 col-xs-1 col-lg-1">
            <div style="float: right"><span>排序方式</span></div>
        </div>
        <div class="col-md-11 col-xs-11 col-lg-11">
            <div class="form-group" style="overflow: hidden">
                <select class="form-control" name="type" id="orderType" style="width: 160px;;float: left">
                    <option value="">不排序</option>
                    <option value="asc">升序</option>
                    <option value="desc">降序</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row" style="padding-top: 10px">
        <div class="col-md-1 col-xs-1 col-lg-1">
            <div style="float: right"><span>条件筛选</span></div>
        </div>
        <div class="col-md-11 col-xs-11 col-lg-11">
            <div id="builder"></div>
        </div>
    </div>
    <div class="row" style="padding-top: 10px;margin-bottom: 20px">
        <div class="col-md-1 col-xs-1 col-lg-1">
        </div>
        <div class="col-md-11 col-xs-11 col-lg-11">
            <a class="btn btn-success" onclick="yesRulestatic()">确定规则</a>
            <a class="btn btn-info" onclick="save()">保存</a>
        </div>
    </div>
</div>
<div class="panel-body" style="margin-top: 10px;background: #dde0e8;border: 2px solid #e9e9e9;padding: 5px">
    <div class="table-responsive">
        <div class="dataTables_wrapper form-inline" role="grid">
            <div class="row">
                <div class="col-sm-6">
                    <div class="dataTables_length">
                        <i style="font-size: 20px;margin-left: 30px;cursor: pointer;" onclick="changetype('pie')"
                           class="iconfont icon-piechart"></i>
                        <i style="font-size: 20px;margin-left: 30px;cursor: pointer;" onclick="changetype('bar')"
                           class="iconfont icon-bars3"></i>
                        <i style="font-size: 20px;margin-left: 30px;cursor: pointer;" onclick="changetype('line')"
                           class="iconfont icon-linechart"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel-body" style="background: #FFFFFF;border: 2px solid #e9e9e9">
    <div class="row">
        <div class="col-lg-12 col-xs-12 col-md-12">
            <div id="static" style="height:620px;width: 96%"></div>
        </div>
    </div>
</div>


<script>
    var target = 1;
    var latitude = 1;
    var tableColumn = [];
    var savetype="";
    //var queryBuilder=$("#builder").queryBuilder();
    var width = document.body.clientWidth / 12;
    $("#static").width((width * 10) - 50);
    var mycharts = echarts.init(document.getElementById("static"));
    $(function () {
        $("#tabC").addClass("rulestatic_load");
        GetTableList();
        window.onresize = function () {
            mycharts.resize();
        };
    })

    //获取数据源
    function GetTableList() {
        var json = {
            "url": GLOBAL.URL + "/sysConfig/tableInfo",
            "type": 'get',
            "successfn": function (data) {
                var str = "";
                for (var i = 0; i < data.list.length; i++) {
                    str += '<option value="' + data.list[i].tableName + '">' + data.list[i].tableComment + '</option>';
                }
                $("#datatable").append(str);
            },
            "errorfn": function () {
                //ajaxUpdataTable();
                //$.ligerDialog.warn("系统繁忙，请稍候再试");
            }
        };
        ajaxdata(json);
    }

    //数据源点击事件
    function changedatatable() {
        GetTableColumnList($("#datatable").val());
    }

    //获取表字段
    function GetTableColumnList(tablename) {
        var json = {
            "url": GLOBAL.URL + "/sysConfig/tableColumn?tableName=" + tablename,
            "type": 'get',
            "successfn": function (data) {
                tableColumn = data.info;
                settarget("#target1");
                setlatitude("#latitude1");
                setWhere(tableColumn);
            },
            "errorfn": function () {
                //ajaxUpdataTable();
                //$.ligerDialog.warn("系统繁忙，请稍候再试");
            }
        };
        ajaxdata(json);
    }

    //绑定指标
    function settarget(id) {
        var str = "";
        for (var i = 0; i < tableColumn.length; i++) {
            var lable = tableColumn[i].columnComment == "" ? tableColumn[i].columnName : tableColumn[i].columnComment;
            str += '<option value="' + tableColumn[i].columnName + '">' + lable + '</option>';
        }
        $(id).html(str);
    }

    //绑定维度
    function setlatitude(id) {
        var str = "";
        for (var i = 0; i < tableColumn.length; i++) {
            var lable = tableColumn[i].columnComment == "" ? tableColumn[i].columnName : tableColumn[i].columnComment;
            str += '<option value="' + tableColumn[i].columnName + '">' + lable + '</option>';
        }
        $(id).html(str);
    }

    //条件筛选
    function setWhere(data) {

        if (data != null) {
            $('#builder').queryBuilder('destroy');
            var filterdata = [];
            for (var i = 0; i < data.length; i++) {
                var column = {
                    id: data[i].columnName,
                    label: data[i].columnComment,
                    type: 'string',
                    operators: ['equal', 'not_equal', 'begins_with', 'contains']
                }
                filterdata.push(column);
            }
            queryBuilder = $('#builder').queryBuilder({
                filters: filterdata
            });
        }
    }

    //新增指标
    function addtarget() {
        target++;
        var str = "";
        str += '<div class="form-group" style="overflow: hidden" >';
        str += '    <select class="form-control" id="target' + target + '" name="target" style="width: 160px;float: left">';
        str += '    <option value="">请选择</option>';
        str += '    </select>';
        str += '    <span style="float: left;line-height: 30px;margin-left: 10px;margin-right: 10px;">的</span>';
        str += '    <select class="form-control" id="type' + target + '" name="type" style="width: 160px;;float: left">';
        str += '    <option value="">请选择</option>';
        str += '    <option value="COUNT">总数</option>';
        str += '    <option value="AVG">平均数</option>';
        str += '    <option value="SUM">和</option>';
        str += '    </select>';
        str += '    <span class="target_btn"><i class="fa fa-minus" onclick="deltarget(' + target + ')"></i></span>';
        str += '</div>';
        $("#targetgroup").append(str);
        settarget("#target" + target);
    }

    //删除指标
    function deltarget(index) {
        var id = "#target" + index;
        $(id).parent().remove();
    }

    //新增纬度
    function addlatitude() {
        latitude++;
        var str = "";
        str += '<div class="form-group"  style="overflow: hidden" >';
        str += '   <select class="form-control" id="latitude' + latitude + '" name="latitude" style="width: 160px;float: left;">';
        str += '   <option value="">请选择</option>';
        str += '   </select>';
        str += '   <span class="target_btn"><i class="fa fa-minus" onclick="dellatitude(' + latitude + ')"></i></span>';
        str += '</div>';
        $("#latitudegroup").append(str);
        setlatitude("#latitude" + latitude);
    }

    function dellatitude(index) {
        var id = "#latitude" + index;
        $(id).parent().remove();
    }

    //确定规则
    function yesRulestatic() {
        var data = setJson('bar');
        getstaticpic(data);
    }

    //点击保存按钮
    function save() {
        var data = setJson('bar');
        saveData(data);
    }

    //保存规则
    function saveData(data) {
        if(savetype!=""){
            data.chart_type=savetype;
        }
        $.ajax({
            url: GLOBAL.URL + "/chartinfo/save",
            type: 'POST',
            data: {"json": JSON.stringify(data)},
            dataType: "json",
            ContentType: 'application/json',
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (info) {
                if (info.code != "0") {
                    AlertInfo("操作失败！" + info.msg);
                } else {
                    AlertInfo("操作成功！");
                    $("#tabC").load(GLOBAL.LOADURl);
                    $("#tabC").removeClass("rulestatic_load");
                    //getstaticpic(data);
                }

            },
            error: function (err) {
                //ajaxUpdataTable();
                //$.ligerDialog.warn("系统繁忙，请稍候再试");
            }
        });
    }

    //获取统计图
    function getstaticpic(data) {
        $.ajax({
            url: GLOBAL.URL + "/chartinfo/view",
            type: 'POST',
            data: {"json": JSON.stringify(data), "groupRule": data.groups[0].name, "chartType": data.chart_type},
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                var option = JSON.parse(data);
                mycharts.clear();
                mycharts.setOption(option);
            },
            error: function (err) {
                //ajaxUpdataTable();
                //$.ligerDialog.warn("系统繁忙，请稍候再试");
            }
        });
    }

    //处理json
    function setJson(type) {
        var data = {
            table: "",
            scheme: "",
            orderType:"",
            group_name:"",
            chart_type: type,
            target: [],
            groups: [],
            rules: {
                condition: "AND",
                rules: [{
                    id: "id",
                    field: "id",
                    type: "integer",
                    input: "number",
                    operator: "less",
                    value: "1000"
                }],
                valid: true
            }
        }
        //表名
        data.table = $("#datatable").val();
        //规则名称
        data.scheme = $("#rulestaticname").val();
        //分组名称
        data.group_name=$("#group_name").val();
        //排序方式
        data.orderType=$("#orderType").val();
        //指标
        var targetlist = $("#targetgroup").children().children();
        for (var i = 1; i <= (targetlist.length / 4); i++) {
            var target = {
                name: $("#target" + i).val(),
                calctype: $("#type" + i).val(),
                alias: $("#target" + i).find("option:selected").text() + "的" + $("#type" + i).find("option:selected").text()
            };
            data.target.push(target);
        }
        //纬度
        var latitudelist = $("#latitudegroup").children().children();
        for (var i = 1; i <= (latitudelist.length); i++) {
            var latitude = {
                name: $("#latitude" + i).val(),
                alias: $("#latitude" + i).find("option:selected").text()
            };
            data.groups.push(latitude);
        }
        //条件筛选
        var rules = $('#builder').queryBuilder('getRules');
        data.rules = rules;
        return data;
    }

    //属性选择
    function changetype(type) {
        savetype=type;
        var data = setJson(type);
        getstaticpic(data);
    }

    function showrulestatic(info) {
        var rulenodelist = $("#ruleform").children();
        if (info == 0) {
            for (var i = 0; i < rulenodelist.length; i++) {
                if (i != 0) {
                    rulenodelist[i].hidden = true;
                }
            }
            $("#show").html("<span onclick=showrulestatic('1') style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-down'  style='margin-right: 10px'></i>展开规则</span>")
        } else {
            for (var i = 0; i < rulenodelist.length; i++) {
                if (i != 0) {
                    rulenodelist[i].hidden = false;
                }
            }
            $("#show").html("<span onclick=showrulestatic('0')  style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-up'  style='margin-right: 10px'></i>收起规则</span>")
        }

    }
</script>
